<template>
  <div id="bar-echarts"></div>
</template>
<script>
export default {
  props: {
    showStatus: {
      type: Number,
    },
    orderData: {
      type: Object,
    },
  },
  data() {
    return {
      qAllCount: [],
      qCount: [],
      qMoney: [],
      qRate: [],
      yearAllCount: [],
      yearCount: [],
      yearMoney: [],
      yearRate: [],
      year : new Date().getFullYear()
    };
  },
  created() {
    this.orderData.qList.forEach((item) => {
      this.qAllCount.push(item.allCount);
      this.qCount.push(item.count);
      this.qMoney.push(item.money);
      this.qRate.push(item.rate);
    });
    this.orderData.yearList.forEach((item) => {
      this.yearAllCount.push(item.allCount);
      this.yearCount.push(item.count);
      this.yearMoney.push(item.money);
      this.yearRate.push(item.rate);
    });
    //   console.log("created", this.showStatus);
  },
  computed: {
    myTitle() {
      return this.showStatus == 0 ? `${this.year}年季度店铺统计` : "年度店铺统计";
    },
    myxAxis() {
      return this.showStatus == 0
        ? ["第一季度", "第二季度", "第三季度", "第四季度"]
        : [this.year-4, this.year-3, this.year-2, this.year-1, this.year];
    },
    myData1() {
      return this.showStatus == 0 ? this.qAllCount : this.yearAllCount;
    },
    myData2() {
      return this.showStatus == 0 ? this.qCount : this.yearCount;
    },
    myData3() {
      return this.showStatus == 0 ? this.qMoney : this.yearMoney;
    },
    myData4() {
      return this.showStatus == 0 ? this.qRate : this.yearRate;
    },
  },
  mounted() {
    this.barEcharts();
  },
  methods: {
    barEcharts() {
      let myChart = this.$echarts.init(document.getElementById("bar-echarts"));
      let posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];
      //let app = {};
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: this.$echarts.util.reduce(
            posList,
            function (map, pos) {
              map[pos] = pos;
              return map;
            },
            {}
          ),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };
      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function () {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance,
            },
          };
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };
      let labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: "#fff",
          },
        },
      };
      let option = {
        title: {
          text: this.myTitle,
          x: "60%", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: "5%",
        },
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        grid: {
          left: "5%",
          right: "15%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter:
            "{a0}: {c0}单<br />{a1}: {c1}单<br /> {a2}: {c2}元 <br />{a3}: {c3}%",
        },
        legend: {
          data: ["总订单数", "有效订单数", "销售总额", "顾客留存率"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            //dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            // axisTick: { show: false },
            data: this.myxAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "订单数",
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value} 单",
            },
          },
          {
            type: "value",
            name: "销售总额",
            offset: 65,
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value} 元",
            },
          },
          {
            type: "value",
            name: "顾客留存率",
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "总订单数",
            type: "bar",
            barGap: 0,
            label: labelOption,
            yAxisIndex: 0,
            data: this.myData1,
          },
          {
            name: "有效订单数",
            type: "bar",
            label: labelOption,
            yAxisIndex: 0,
            data: this.myData2,
          },
          {
            name: "销售总额",
            type: "bar",
            label: labelOption,
            yAxisIndex: 1,
            data: this.myData3,
          },
          {
            name: "顾客留存率",
            type: "bar",
            // type: "line",
            label: labelOption,
            yAxisIndex: 2,
            data: this.myData4,
          },
        ],
      };
      myChart.setOption(option);
      //   myChart.on("click", function (params) {
      //     // 控制台打印数据的名称
      //     console.log(params.name);
      //   });
    },
  },
};
</script>
<style lang="scss" scoped>
#bar-echarts {
  height: 600px;
  width: 95%;
  // border: 1px solid red;
}
</style>